<template>
  
  <div>
              <h2>Home组件内容</h2>
              <div>
                <ul class="nav nav-tabs">
                  <li>
                    <!--
                      router有两种模式

                      replace 与 push
                      前者会不断覆盖前面的历史记录
                      push则会不断的压栈进入历史记录，可以后退完成历史倒退
                      但是replace则不行

                    -->
                    <router-link  active-class="active" class="list-group-item" to="/home/news">News</router-link>
                  </li>
                  <li>
                    <router-link active-class="active" class="list-group-item" to="/home/message">Message</router-link>
                  </li>
                </ul>

                <!--
                  不让展示的路由由于切换立刻死去

                  include 里面的内容可以写
                  你想要缓存的组件，这里写你组件定义时候的名字，
                  不再这个include里的，不会缓存

                  多个组件可以用逗号隔开，
                  但是这里其实message组件缓存意义不大，这里只是单纯做个展示
                  NewsCompoent,MessageComponent
                -->
                <keep-alive :include="['NewsCompoent','MessageComponent']">
                  <router-view></router-view>
                </keep-alive>
                
      </div>
   </div>
</template>

<script>
export default {
    name:'HomeComponent'
}
</script>